<script setup lang="ts">
import { ElInput, ElRow, ElButton, ElIcon } from 'element-plus';
import { User, Lock, WarningFilled } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { loginApi } from '../api/userApi';
import userStore from '../store/user';
import router from '../router';
// const router = useRouter()
//用户的登录账号和密码
const userinfo = reactive({ username: '', password: '' })
const store = userStore()
//存储提示消息的
const msg = ref('')
//当输入框获取焦点时关闭提示
const quitMsg = () => msg.value = '';
//点击登录按钮
const loginBtn = () => {
  if (!userinfo.username) msg.value = "请填写用户名称";
  else if (!userinfo.password && userinfo.username) msg.value = "请填写登录密码";
  else {
    quitMsg();
    loginApi(userinfo.username, userinfo.password)
      .then(res => {
        const code = res.data.code;
        console.log(code);
        
        if (code === 200) {//登录成功
          const data = res.data.data
          const routerList = data.routerList;
          sessionStorage.setItem('routerList',JSON.stringify(routerList))
          sessionStorage.setItem('menuList', JSON.stringify(routerList))
          sessionStorage.setItem('userId',data.userId)
          sessionStorage.setItem('avator', data.avator)
          sessionStorage.setItem('nickName', data.nickName)
          store.setRouterList(routerList);
          store.setMenuList(routerList);
          const nextTo = sessionStorage.getItem('nextTo')||'/data/overview'
          console.log('准备跳转', nextTo);
          router.push(nextTo)
        } else if (code === 401) {//账号或密码错误
          console.log('ssssssssssssssssssddd');
          msg.value = '用户名或密码不正确'
        }


      })
      .catch(e => {
        console.log('e', e);

      })
  }
}
</script>
<template>
<!-- 大背景图 -->
  <div class="beijing" style="height: 100%;">
    <!-- 中间蒙版 -->
    <div class="touming">
      <!-- 网站名称 -->
      <div class="title">
        <div class="icon"></div>
        <div class="font">
          <div class="zn">和智云仓储管理系统</div>
          <div class="en">HeZi Cloud Warehouse Management System</div>
        </div>
      </div>
      <!-- 登录 -->
      <div class="input">
        <el-row :gutter="20">
          <el-input v-model="userinfo.username" @blur=quitMsg type="text" placeholder="请输入用户名称" :prefix-icon="User" />
        </el-row>
        <el-row :gutter="20">
          <el-input v-model="userinfo.password"  @blur=quitMsg type="password" show-password placeholder="请输入登录密码" :prefix-icon="Lock" />
        </el-row>
        <el-button class="loginBtn" type="primary" @click="loginBtn">登录</el-button>

      </div>
      <div class="title_msg" v-show="msg">
        <el-icon>
          <WarningFilled />
        </el-icon>
        <div> {{ msg }}</div>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
//大背景层
.beijing {
  width: 100%;
  min-width: 800px;
  min-height: 500px;
  background: url('https://img.axureshop.com/21/02/6d/21026de2d5d84d92b6d5133596c96de8/images/%E7%99%BB%E5%BD%95/u1_state0.jpg');
  background-position: right top;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;

  //中间透明层
  .touming {
    background-color: rgba(54, 67, 72, 0.9);
    width: 100%;
    height: 300px;
    position: relative;
    left: 0;
    top: 180px;

    // 标题
    .title {
      display: flex;
      justify-content: center;
      height: 80px;
      align-items: center;
      padding-top: 60px;

      //图标
      .icon {
        width: 80px;
        height: 80px;
        background-image: url('../../public/logo.png');
        background-size: 80px 80px;
      }

      // 字体
      .font {
        color: #fff;

        // 中文
        .zn {
          font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
          font-weight: 700;
          font-size: 44px;
        }

        // 英文
        .en {
          font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
          font-weight: 700;
          font-size: 33px;
        }
      }

    }

    // 输入框
    .input {
      width: 600px;
      margin-top: 50px;
      margin: 50px auto 10px;
      display: flex;
      justify-content: space-evenly;
      height: 50px;

      .el-row {
        .el-input {
          width: 240px;
          font-size: 16px;
        }
      }
    }

    // 登录按钮
    .loginBtn {
      height: 50px;
    }

    .title_msg {
      width: 600px;
      margin: 0 auto;
      padding-left: 30px;
      box-sizing: border-box;
      color: #e2a346;
      font-size: 18px;
      display: flex;
      align-items: center;

      .el-icon {
        line-height: 24px;

      }
    }
  }

}
</style>
